<script setup>
import { computed, onMounted, ref } from 'vue'
import { useCategoryStore } from '@/stores/modules/category'
import GoodsItem from '@/components/GoodsItem.vue'

const categoryStore = useCategoryStore()
const categoryList = ref([])
const goodsList = ref([])
const hoverId = ref('')
const categoryGoodsShow = ref(false)
onMounted(async () => {
  categoryList.value = await categoryStore.queryHomeCategoryList()
})
const categoryDict = computed(() =>
  categoryList.value.reduce((dict, item) => {
    dict[item.id] = item.goods
    return dict
  }, {}),
)

function onEnter(categoryId) {
  goodsList.value = categoryDict.value[categoryId] || []
  hoverId.value = categoryId
  categoryGoodsShow.value = true
}

function homeCategoryLeave() {
  goodsList.value = []
  hoverId.value = ''
  categoryGoodsShow.value = false
}
</script>

<template>
  <div class="home-category" @mouseleave="homeCategoryLeave">
    <div class="category-item">
      <ul>
        <li
          @mouseenter="onEnter(category.id)"
          v-for="category in categoryList"
          :key="category.id"
          :class="{ hover: hoverId === category.id }"
        >
          <router-link active-class="active" :to="`/category/${category.id}`">{{
            category.name
          }}</router-link>
          <router-link
            to="/"
            v-for="children in (category.children || []).slice(0, 2)"
            :key="children"
          >
            {{ children.name }}
          </router-link>
        </li>
      </ul>
    </div>
    <Transition name="slide">
      <div class="category-goods" v-show="goodsList.length">
        <div class="hidden">
          <div class="top">
            <h3>分类推荐</h3>
            <span>根据您的购买或浏览记录推荐</span>
          </div>
          <div class="recommend">
            <el-row :gutter="5">
              <el-col class="col" :span="8" v-for="goods in goodsList" :key="goods.id">
                <el-card>
                  <GoodsItem :goods="goods"></GoodsItem>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
.hover {
  background-color: $sucColor;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from {
  transform: translateY(-20px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.home-category {
  max-height: 360px;
  display: flex;
  gap: 0 10px;

  .category-item {
    background-color: rgb(44, 44, 44, 0.9);

    ul {
      width: 100%;
      display: flex;
      flex-direction: column;

      li {
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding: 0 30px;
        display: flex;
        gap: 0 5px;

        a {
          color: white;
        }
      }
    }
  }

  .category-goods {
    flex: 2;

    .hidden {
      height: 100%;

      .top {
        gap: 0 10px;
        display: flex;
        align-items: center;
        height: 30px;

        span {
          color: #5a5757;
          font-size: 12px;
        }
      }

      .recommend {
        height: 330px;

        .el-row {
          height: 100%;

          .el-col {
            height: 33.33%;

            .el-card {
              height: 95%;
            }
          }
        }
      }
    }
  }
}
</style>
